<template>
	<view class="container">
		<scroll-view scroll-x class="un-aftersale-tou">
			<view class="un-aftersale-tou1">
				<view class="cu-item" :class="0==TabCur?'cur':''"  @tap="tabSelect(0)"> 售后申请 </view>
				<view class="cu-item" :class="1==TabCur?'cur':''"  @tap="tabSelect(1)"> 申请记录 </view>
			</view>
		</scroll-view>
		<swiper :current="TabCur" class="swiper-box" :duration="300" @change="changeTab">
			<swiper-item >
				<scroll-view class="list"  scroll-y >
					<view class="un-aftersale-apply">
						<!-- 空白页 -->
						<view v-if="false" style="color: #CCCCCC;text-align: center;width: 100%;height: 500upx;line-height: 500upx;font-size: 32upx;"> 暂无相关的售后记录</view>
					
						<view v-else class="un-aftersale-order"  v-for="(item,index) in list" :key="index" >
							<view class="un-aftersale-order-header">
								<text>订单编号 ：</text>
								<text>{{item.orderid}}</text>
								<text class="un-aftersale-order-header-text1">下单时间 ：</text>
								<text>{{item.time}}</text>
							</view>
							<view class="un-aftersale-order-goods" v-for="(item1,index1) in list[index].goodsList" :key="index1">
								<view class="un-aftersale-goods" @click="navToProductDetail(item1.id)">
									<view class="un-aftersale-image">
										<image :src="item1.THUMB"></image>
									</view>
									<view class="un-aftersale-text">
										<text class="clamp un-text1">{{item1.NAME}}</text>
										<text class="clamp un-text2">{{item1.SPEC}}</text>
										<text class="un-text2">¥{{item1.PRICE}}</text>
									</view>
									<view class="un-aftersale-text1">
										<text>X{{item1.COUNT}}</text>
									</view>
								</view>
								<view class="un-aftersale-button">
									<view class="un-aftersale-button1" v-if="item.limit">
										<text class="iconfont icon-tanhao un-aftersale-button1-icon"></text>
										<text class="un-aftersale-button1-text">该商品已超过售后期</text>
									</view>
									<view class="un-aftersale-button2" :class="item.limit?'un-aftersale-limit':''" @click="navToSalesReturn(item,item1.id)">
										<text >申请退货</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item >
				<scroll-view class="list"  scroll-y >
					<view class="un-aftersale-apply">
						<!-- 空白页 -->
						<view v-if="false" style="color: #CCCCCC;text-align: center;width: 100%;height: 500upx;line-height: 500upx;font-size: 32upx;"> 暂无相关的售后记录</view>
					
						<view v-else class="un-aftersale-order"  v-for="(item,index) in list" :key="index" >
							<view class="un-aftersale-order-header">
								<text>服务单号 ：</text>
								<text>{{item.idd}}</text>
								<text class="un-aftersale-order-header-text1">申请时间 ：</text>
								<text>{{item.time}}</text>
							</view>
							<view class="un-aftersale-order-goods" v-for="(item1,index1) in list[index].goodsList" :key="index1">
								<view class="un-aftersale-goods" @click="navToProductDetail(item1.id)">
									<view class="un-aftersale-image">
										<image :src="item1.THUMB"></image>
									</view>
									<view class="un-aftersale-text">
										<text class="clamp un-text1">{{item1.NAME}}</text>
										<text class="clamp un-text2">{{item1.SPEC}}</text>
										<text class="un-text2">¥{{item1.PRICE}}</text>
									</view>
									<view class="un-aftersale-text1">
										<text>X{{item1.COUNT}}</text>
									</view>
								</view>
								<view class="un-aftersale-button">
									<view class="un-aftersale-button1">
										<text class="iconfont icon-dui un-aftersale-button1-icon1"></text>
										<text class="un-aftersale-button1-text">已完成</text>
									</view>
									<text class="iconfont icon-youjiantou un-aftersale-button1-icon2" @click="navToRecordDetail(item.idd)"></text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				TabCur:0,
				list:[
					{idd:'1',orderid:'11977240',time:'2017-05-01 16:00',limit:false,goodsList: [
						{ NAME: '古黛妃 短袖t恤女 春夏装2019新款韩版宽松',
							PRICE: 179.5,
							THUMB: 'https://img13.360buyimg.com/n8/jfs/t1/30343/20/1029/481370/5c449438Ecb46a15b/2b2adccb6dc742fd.jpg',
							COUNT: 1,
							SPEC: '珊瑚粉 M',
							id:1
						},
						{
							NAME: '回力女鞋高帮帆布鞋女学生韩版鞋子女2019潮鞋女鞋新款春季板鞋女',
							PRICE: 69,
							THUMB: 'https://img.alicdn.com/imgextra/i3/2128794607/TB2gzzoc41YBuNjy1zcXXbNcXXa_!!2128794607.jpg_430x430q90.jpg',
							COUNT: 1,
							SPEC: '白色-高帮 39',
							id:2
						
						}]
					},
					{idd:'2',orderid:'11977240',time:'2017-05-01 16:00',limit:true,goodsList: [
						{ NAME: '古黛妃 短袖t恤女 春夏装2019新款韩版宽松',
							PRICE: 179.5,
							THUMB: 'https://img13.360buyimg.com/n8/jfs/t1/30343/20/1029/481370/5c449438Ecb46a15b/2b2adccb6dc742fd.jpg',
							COUNT: 1,
							SPEC: '珊瑚粉 M',
							id:3
						},
						{
							NAME: '回力女鞋高帮帆布鞋女学生韩版鞋子女2019潮鞋女鞋新款春季板鞋女',
							PRICE: 69,
							THUMB: 'https://img.alicdn.com/imgextra/i3/2128794607/TB2gzzoc41YBuNjy1zcXXbNcXXa_!!2128794607.jpg_430x430q90.jpg',
							COUNT: 1,
							SPEC: '白色-高帮 39',
							id:4
						}]}
				]
			}
		},
		onLoad() {
			
			uni.startPullDownRefresh();
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			//点击标题
			tabSelect(cur){
				this.TabCur=cur;
			},
			//swiper 切换
			changeTab(e){
				this.TabCur = e.target.current;
			},
			//跳转申请退货
			navToSalesReturn(order,goodsId){
				if(!order.limit){
					uni.navigateTo({
						url:`/pages/aftersale/salesreturn/salesreturn?orderId=`+order.orderid+`&goodsId=`+goodsId
					})
				}
			},
			//跳转商品详情
			navToProductDetail(goodsId){
				uni.navigateTo({
					url:`/pages/product/product?id=`+goodsId
				})
			},
			//跳转记录详情
			navToRecordDetail(recordId){
				uni.navigateTo({
					url:`/pages/aftersale/recordDetail/recordDetail?recordId=`+recordId
				})
			}
		}
	}
</script>

<style lang="scss">
	page,.container{
		background-color: #f5f5f5;
		height: 100%;
		.swiper-box {
			flex: 1;
			width: 100%;
			height: calc(100% - 100upx);
			// height: 100%;
			.list{
				height: 100%;
				width: 100%;
			}
		}
	}
	.un-aftersale-tou{
		white-space: nowrap;
		background-color: #ffffff;
		.un-aftersale-tou1{
			display: flex;
			text-align: center;
			height: 70upx;
			.cu-item {
				height: 70upx;
				display: inline-block;
				line-height: 70upx;
				margin: 0 10upx;
				padding: 0 20upx;
				flex: 1;
				font-size: 25upx;
			}
			.cur{
				color: #E02E24;
				position: relative;
			}
			.cur::after {
				content: "";
				position: absolute;
				width: 140upx;
				height: 4upx;
				bottom:0 ;
				left: 30%;
				background-color: #E02E24;
			}
		}
	}

	.un-aftersale-order{
		margin-top: 20upx;
		background-color: #ffffff;
		padding: 30upx;
		.un-aftersale-order-header{
			font-size: 25upx;
			color: #999999;
			.un-aftersale-order-header-text1{
				margin-left: 20upx;
			}
		}
		.un-aftersale-order-goods{
			border: 1upx solid #f2f2f2;
			margin-top: 20upx;
			.un-aftersale-goods{
				border-bottom: 1upx solid #f2f2f2;
				background-color: #f5f5f5;
				display: flex;
				padding: 20upx;
				.un-aftersale-image{
					width: 160upx;
					height: 160upx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.un-aftersale-text{
					width: 400upx;
					padding: 0upx 40upx;
					font-size: 25upx;
					line-height: 50upx;
					.un-text1{
						color: #666666;
						
					}
					.un-text2{
						color: #CCCCCC;
					}
				}
				.un-aftersale-text1{
					width: 100upx;
					font-size: 25upx;
					line-height: 50upx;
					color: #E02E24;
					text-align: right;
				}
			}
			.un-aftersale-button{
				display: flex;
				position: relative;
				height: 90upx;
				padding-left: 20upx;
				.un-aftersale-button1-icon2{
					font-size: 45upx;
					color: #999999;
					position: absolute;
					left: 620upx;
					top: 20upx;
				}
				.un-aftersale-button1{
					font-size: 25upx;
					color: #999999;
					line-height: 90upx;
					.un-aftersale-button1-icon{
						font-size: 28upx;
					}
					.un-aftersale-button1-icon1{
						font-size: 25upx;
						font-weight: 900;
						color: #E02E24;
					}
					
					.un-aftersale-button1-text{
						margin-left: 10upx;
					}
					
				}
				.un-aftersale-button2{
					position: absolute;
					left: 520upx;
					top: 10upx;
					border: 1upx solid #F04844;
					color: #F04844;
					font-size: 25upx;
					padding: 15upx 30upx;
					border-radius: 8upx;
				}
				.un-aftersale-limit{
					position: absolute;
					left: 520upx;
					top: 10upx;
					border: 1upx solid #CCCCCC;
					color: #CCCCCC;
					font-size: 25upx;
					padding: 15upx 30upx;
					border-radius: 8upx;
				}
			}
		}
		
	}

</style>
